<script setup>
import PageContainer from "@/components/PageContainer/index.vue";
import appTable from "@/components/i-table/t-able.vue";
import {
  apiGetListService,
  apiDeleteLogService,
  apiDeleteAllLogService,
} from "@/api/logs";
import { formatTime } from "@/utils/format";

import { reactive, ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import FormDetail from "@/components/FormDetail/index.vue";

onMounted(() => {
  getList();
});

const getList = async () => {
  let params = Object.assign({}, queryParams, tableContent.pagination);
  console.log(tableContent.pagination, params);
  tableContent.options.loading = true;
  try {
    const { code, result } = await apiGetListService(params);
    tableContent.list = result.list.map((item) => {
      return { ...item, ...item.meta };
    });
    tableContent.total = result.total;
    tableContent.options.loading = false;
  } catch (error) {
    tableContent.options.loading = false;
  }
};

// 切换每页显示的数量
const handleSizeChange = (pagination) => {
  console.log("pagination", pagination);
  Object.assign(tableContent.pagination, pagination);
  getList();
};
// 切换页码
const handleIndexChange = (pagination) => {
  console.log("pagination", pagination);
  tableContent.pagination = pagination;
  getList();
};

const deleteLogs = async (row) => {
  let text = row.id ? "你确认删除该日志信息吗？" : "你确认清空所有日志信息吗？";
  await ElMessageBox.confirm(text, "温馨提示", {
    type: "warning",
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  });
  if (row.id) {
    await apiDeleteLogService(row.id);
  } else {
    await apiDeleteAllLogService();
  }

  ElMessage({ type: "success", message: "删除成功" });
  getList();
};

const handleQuery = () => {
  getList();
};
const resetQuery = () => {
  try {
    formRenderer.value.resetFields();
    Object.assign(tableContent.pagination, { pageNum: 1, pageSize: 10 });
    getList();
  } catch (error) {
    console.log(error);
  }
};
const detailModule = [
  {
    title: "",
    column: 1,
    keyArr: [
      {
        label: "请求地址",
        keyName: "url",
      },
      {
        label: "请求方式",
        keyName: "method",
      },
      {
        label: "状态码",
        keyName: "code",
      },
      {
        label: "http状态码",
        keyName: "status",
      },
      {
        label: "请求参数",
        keyName: "body",
      },

      {
        label: "错判堆栈",
        keyName: "stack",
      },
    ],
  },
];

// 表格
let tableContent = reactive({
  total: 0,
  list: [],
  otherHeight: 150,
  columns: [
    {
      prop: "level",
      label: "级别",
      align: "center",
    },
    {
      prop: "method",
      label: "请求方式",
      align: "center",
    },
    {
      prop: "message",
      label: "消息",
      align: "center",
      el: {
        "show-overflow-tooltip": true,
      },
    },
    {
      prop: "url",
      label: "请求地址",
      align: "center",
      el: {
        "show-overflow-tooltip": true,
      },
    },
    {
      prop: "timestamp",
      label: "创建时间",
      align: "center",
      formatter: (row) => {
        return formatTime(row.timestamp);
      },
    },
  ], // 需要展示的列
  options: {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    mutiSelect: false, // 是否支持列表项选中功能
    border: true, //是否显示边框
    numbers: true, //是否显示序号
  }, // table 的参数
  pagination: {
    pageSizes: [2, 4, 6, 8],
    pageNum: 1,
    pageSize: 10,
  }, // 分页参数
  operates: {
    width: 200,
    list: [
      {
        label: "详情",
        plain: true,
        method: (index, row) => {
          dialogVisible.value = true;
          detailData.value = row.meta;
        },
      },
      {
        label: "删除",
        plain: true,
        method: (index, row) => {
          deleteLogs(row);
        },
      },
    ],
  },
});
const queryParams = reactive({});
const dialogVisible = ref(false);
const formRenderer = ref();
const detailData = ref({});
const content = reactive([
  {
    type: "input",
    id: "requestId",
    label: "请求id",
  },
]);
const handleClose = () => {};
</script>
<template>
  <div>
    <page-container title="文章管理">
      <template #extra>
        <el-button type="primary" @click="deleteLogs">清空日志</el-button>
      </template>
      <el-form-renderer
        label-width="100px"
        :content="content"
        ref="formRenderer"
        style="padding-right: 30px"
        v-model:FormData="queryParams"
        class="render-form"
      >
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery"> 重置 </el-button>
      </el-form-renderer>

      <app-table
        :list="tableContent.list"
        :total="tableContent.total"
        :otherHeight="tableContent.otherHeight"
        :options="tableContent.options"
        :pagination="tableContent.pagination"
        :columns="tableContent.columns"
        :operates="tableContent.operates"
        @handleSizeChange="handleSizeChange"
        @handleIndexChange="handleIndexChange"
      >
      </app-table>
    </page-container>
    <!-- 弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="日志详情"
      @close="handleClose"
      width="1200px"
    >
      <FormDetail :descList="detailModule" :data="detailData"></FormDetail>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped></style>
